:root {
    --text-color: rgb(45, 114, 124);
    --primary-color: #ad2f2f;
    --primary-color1: #768f72;
    --primary-color2: #33793c;
    --primary-color3: #7fc39a;
    --primary-color4: #7c3232;
    --primary-color5: #4a6437;
    --primary-color6: #1e2958;
    --block-background-color: #c2dbb1;
    --marker-color: #6e93a9;
    --control-text-hover-color: #c2c3e3;
    --title-count: 1;  /* 定义全局计数器名称 */
  }
  
  /*
   * Font-face for Cantarell, Source Han Serif CN and JetBrains Mono
   */
  
  @font-face {
    font-family: "Cantarell";
    src: url('lapis/Cantarell-Regular.ttf');
  }
  
  @font-face {
    font-family: "JetBrainsMono";
    src: url('lapis/JetBrainsMono-Regular.ttf');
  }
  
  @font-face {
    font-family: "SourceHanSerifCN";
    src: url('lapis/SourceHanSerifCN-Regular.otf');
  }
  
  @font-face {
    font-family: "SourceHanSerifCN";
    src: url('lapis/SourceHanSerifCN-Bold.otf');
    font-weight: bold;
  }
  
  /*
   * Basic Style
   */
  
  #write {
      max-width: 950px;
      font-size: 1.1rem;
      color: var(--text-color);
      line-height: 1.6;
      word-spacing: 0px;
      letter-spacing: 0px;
      word-break: break-word;
      word-wrap: break-word;
      text-align: left;
      
      /* font-family: 'Cantarell','Source Han Serif CN','JetBrains Mono'; */
      font-family: 'Cantarell','SourceHanSerifCN','JetBrainsMono';
      margin-bottom: 20rem;
  }
  
  /* Strong */
  
  #write strong {
    color:var(--primary-color);
  }
  
  /* Link */
  
  #write a {
    text-decoration: none;
    word-wrap: break-word;
    color: var(--primary-color);
    border-bottom: 1px solid var(--primary-color);
    margin: 2px;
  }
  
  /* mark */
  
  mark {
    background: #ffffb5;
    padding: 1px .15rem;
    border-radius: 1px;
  }
  
  /* 
   * Paragraph
   */
  
  #write + p, 
  #write blockquote p {
    font-size: 1.1rem;
    padding-top: .2rem;
    padding-bottom: .2rem;
    margin: 0;
    line-height: 1.8rem;
    color: var(--text-color);
  }
  
  #write div[mdtype=toc] {
    font-size: 1.1rem;
  }
  
  /*
   * Header
   */
  
  #write h1,
  #write h2,
  #write h3,
  #write h4,
  #write h5,
  #write h6 {
    font-family: 'SourceHanSerifCN';
    margin: 1em 0 1em;
    padding: 0px;
    color: var(--primary-color);
  }
  
  #write h1 {
    font-weight: bold;
    background: var(--primary-color1);
    color: #ffffff;
    padding: 1px 15px 1px;
    border-radius: 4px;
    margin-right: 3px;
    text-align: center;
  }
  
  #write h2 span {
    display: inline-block;
    font-weight: bold;
    background: var(--primary-color2);
    color: #ffffff;
    padding: 1px 15px 1px;
    border-radius: 4px;
    margin-right: 3px;
   }
    #write h3 span {
    display: inline-block;
    font-weight: bold;
    background: var(--primary-color3);
    color: #ffffff;
    padding: 1px 15px 1px;
    border-radius: 4px;
    margin-right: 3px;
   }
   #write h4 span {
    display: inline-block;
    font-weight: bold;
    background: var(--primary-color4);
    color: #ffffff;
    padding: 1px 15px 1px;
    border-radius: 4px;
    margin-right: 3px;
   }
   #write h5 span {
    display: inline-block;
    font-weight: bold;
    background: var(--primary-color5);
    color: #eded8f;
    padding: 1px 15px 1px;
    border-radius: 4px;
    margin-right: 3px;
   }
   #write h6 span {
    display: inline-block;
    font-weight: bold;
    background: var(--primary-color6);
    color: #f8efd7;
    padding: 1px 10px 1px;
    border-radius: 4px;
    margin-right: 3px;
   }
  
  #write h1 { font-size: 2rem; }
  #write h2 { font-size: 1.5rem; }
  #write h3 { font-size: 1.5rem; }
  #write h4 { font-size: 1.3rem; }
  #write h5 { font-size: 1.2rem; }
  #write h6 { font-size: 1.1rem; }


  /* **************************设置标题编号与颜色************************ */
  
  /** initialize css counter */
  #write {
    counter-reset: h1
  }
  
  h1 {
    counter-reset: h2
  }
  
  h2 {
    counter-reset: h3
  }
  
  h3 {
    counter-reset: h4
  }
  
  h4 {
    counter-reset: h5
  }
  
  h5 {
    counter-reset: h6
  }
  
  h6 {
    counter-reset: h7
  }
  
  /** put counter result into headings */
  #write h1:before {
    counter-increment: h1;
    content: "第 " counter(h1) " 段  "
  }
  
  #write h2:before {
    counter-increment: h2;
    content: counter(h1) "." counter(h2) "  "
  }
  
  #write h3:before,
  h3.md-focus.md-heading:before /** override the default style for focused headings */ {
    counter-increment: h3;
    content: counter(h1) "." counter(h2) "." counter(h3) "  "
  }
  
  #write h4:before,
  h4.md-focus.md-heading:before {
    counter-increment: h4;
    content: "(" counter(h4) ")  "
  }
  
  #write h5:before,
  h5.md-focus.md-heading:before {
    counter-increment: h5;
    content: "(" counter(h4) ") - " counter(h5) "  "
  }

  #write h6:before,
  h6.md-focus.md-heading:before {
    counter-increment: h6;
    content: "(" counter(h4) ") / " counter(h5) " - " counter(h6) "  "
  }


  /** override the default style for focused headings */
  #write>h3.md-focus:before,
  #write>h4.md-focus:before,
  #write>h5.md-focus:before,
  #write>h6.md-focus:before,
  h3.md-focus:before,
  h4.md-focus:before,
  h5.md-focus:before,
  h6.md-focus:before {
    color: inherit;
    border: inherit;
    border-radius: inherit;
    position: inherit;
    left:initial;
    float: none;
    top:initial;
    font-size: inherit;
    padding-left: inherit;
    padding-right: inherit;
    vertical-align: inherit;
    font-weight: inherit;
    line-height: inherit;
  }
  
  
  /**************************** END ************************************/
  

  /**************************** 设置目录样式 *****************************/
.md-toc {
  /* 设置目录整体的字体、颜色、大小等 */
  font-family: Arial, Helvetica, sans-serif;
  color: #06443e;
  font-size: 14px;
}

.md-toc-content {
  /* 设置目录内容的边距、对齐等 */
  margin-left: 20px;
  text-align: left;
}

.md-toc-h1 {
  /* 设置一级标题的缩进、粗细等 */
  background-color: #fb545467;
  margin-left: 0px;
  font-weight: bold;
}

.md-toc-h2 {
  /* 设置二级标题的缩进、粗细等 */
  margin-left: 20px;
  font-weight: normal;
}

.md-toc-h3 {
  /* 设置三级标题的缩进、粗细等 */
  margin-left: 40px;
  font-weight: normal;
}

.md-toc-h4 {
  /* 设置四级标题的缩进、粗细等 */
  margin-left: 60px;
  font-weight: normal;
}

.md-toc-h5 {
  /* 设置五级标题的缩进、粗细等 */
  margin-left: 80px;
  font-weight: normal;
}

.md-toc-h6 {
  /* 设置六级标题的缩进、粗细等 */
  margin-left: 100px;
  font-weight: normal;
}

/* 可以根据需要继续设置更多层级的标题样式 */

/**************************** END *****************************/
  
  /*
   * List
   */
  
  ::marker {
    font-weight: bold;
    color: var(--marker-color);
  }
  
  li.md-list-item {
    margin: 0.4rem 0;
  }
  
  #write ul,
  #write ol {
    margin-top: 8px;
    margin-bottom: 8px;
    padding-left: 20px;
  }
  
  #write ul {
    list-style-type: disc;
  }
  
  #write ul ul {
    list-style-type: square;
  }
  
  #write ol {
    list-style-type: decimal;
  }
  
  #write li section {
    margin-top: 5px;
    margin-bottom: 5px;
    line-height: 1.7rem;
    text-align: left;
    color: var(--text-color); 
    font-weight: 500;
  }
  
  /*
   * Quote
   */
  #write blockquote {
    display: block;
    font-size: .9em;
    overflow: auto;
    border-left: 3px solid var(--primary-color);
    padding: 15px 30px 15px 20px;
    margin-bottom: 20px;
    margin-top: 20px;
    background: var(--block-background-color);
  }
  
  /*
   * Inline code
   */
  #write p code,
  #write li code {
    color: var(--primary-color);
    font-size: 1rem;
    word-wrap: break-word;
    padding: 2px 4px 2px;
    border-radius: 3px;
    margin: 2px;
    background-color:  var(--block-background-color);
    font-family: 'JetBrainsMono';
    word-break: break-all;
  }
  
  /*
   * Img
   */
  #write img {
    display: block;
    margin: 0 auto;
    max-width: 100%;
  }
  
  #write span img {
    filter: drop-shadow(#d2dff4 0px 0px 8px);
    border-radius: 3rem;
    display: block;
    margin: 0 auto;
    padding: 2rem;
  }
  
  /*
   * Table
   */
  #write table {
    white-space: nowrap;
    display: table;
    text-align: left;
    display: block;
    overflow-x: auto;
    text-align: left;
    border-collapse: collapse;
    border-spacing: 0px;
    font-size: 1em;
    margin: 0px 0px 20px;
    width: 100%;
  }
  #write tbody {
    border: 0;
  }
  #write table tr {
    border: 0;
    border-top: 1px solid #ccc;
    background-color: white;
  }
  #write table tr:nth-child(2n) {
    background-color: #F8F8F8;
  }
  #write table tr th,
  #write table tr th, #write table tr td {
    font-size: 1rem;
    border: 1px solid #d9dfe4;
    padding: 5px 10px;
    text-align: left;
  }
    #write table tr th {
      min-width: 10rem;
      font-weight: bold;
      background-color: #ffffff;
      color: var(--primary-color);
    }
    
    table.md-table td {
      min-width: 32px;
      background-color: white;
  }
  
  /*
   * Footnote Superscript
   */
  #write .md-footnote {
   font-weight: bold;
   color: var(--primary-color);
  }
  #write .md-footnote > .md-text:before {
   content: '['
  }
  #write .md-footnote > .md-text:after {
   content: ']'
  }
  
  /* Footnote */
  #write .md-def-name {
    padding-right: 1.8ch;
  }
  #write .md-def-name:before {
    content: '[';
    color: #000;
  }
  #write .md-def-name:after {
    color: #000;
  }
  
  span.md-plain {
      line-height: 2rem;
  }
  
  p.md-end-block.md-p {
      line-height: 2rem;
      color: var(--text-color);
      margin: 4px 0;
  }
  
  /*
   * Dividing line
   */
  hr {
    margin-top: 20px;
    margin-bottom: 20px;
    border: 0;
    border-top: 2px solid #eef2f5;
    border-radius: 2px;
  }
  
  /* Checkbox */
  
  #write input[type=checkbox] {
    width: 0;
  }
  
  .task-list-item input::before {
    content: "";
    display: inline-block;
    width: 1.0125rem;
    height: 1.0125rem;
    vertical-align: middle;
    text-align: center;
    border: 1px solid var(--marker-color);
    border-radius: 1.2rem;
    background-color: #fdfdfd;
    margin-left: -0.1rem;
    margin-right: 0.1rem;
    margin-top: -.6rem;
  }
  
  
  .task-list-item input:checked::before {
    content: '✓';
    font-weight: bold;
    -webkit-text-stroke: 1px var(--primary-color);
    color: var(--primary-color);
    background-color: white;
    font-size: 0.75rem;
    line-height: 0.8rem;
  }
  
  /*
   * Sidebar
   */
  #typora-sidebar {
    font-family: 'Cantarell','Source Han Serif CN';
    display: block;
    height: 100%;
    color: #686d75;
    line-height: 1.2rem;
    font-size: 0.8rem;
    min-width: 50px;
    background-color: white;
  }
  
  /*
   * Sidebar - FileNode
   */
  
   .info-panel-tab-wrapper {
    width: 100%;
    display: flex;
    height: 2px;
    -webkit-app-region: drag;
  }
  
  .active-tab-files #info-panel-tab-file .info-panel-tab-border, .active-tab-outline #info-panel-tab-outline .info-panel-tab-border {
    border-radius:10px;
    height: 1px;
    background-color: var(--primary-color);
  }
  
  .file-node-content { color: var(--primary-color); }
  span.file-node-title-name-part  { color: var(--text-color); }
  span.file-node-title-ext-part { color: var(--text-color); }
  .file-node-icon { padding-right: 0.2rem; }
  
  .file-tree-node.active>.file-node-background {
    background-color: var(--block-background-color);
    border-left: 4px solid var(--primary-color);
    border-color: var(--primary-color);
  }
  
  /*
   * Sidebar - Outline
   */
  
  #outline-content {
    display: block;
    height: 100%;
    overflow-x: hidden;
    line-height: 1.2rem;
    font-size: 0.9rem;
    min-width: 50px;
  }
  
  .outline-item {
    padding-left: 2em;
  }
  
  /*
   * Scrollbar
   */
  
  #outline-content::-webkit-scrollbar { width: 0; }
  #file-library::-webkit-scrollbar { width: 0; }
  
  ::-webkit-scrollbar-track {
    border-radius: 10px;
  }
  
  ::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background: rgba(179, 179, 179, 0.425);
  }
  
  ::-webkit-scrollbar {
    width :1rem;
  }
  
  /* 
   * Code Block - Style
   */
  
  .md-fences:before {
    content: ' ';
    display: block;
    width: 100%;
    background-size: 40px;
    background-repeat: no-repeat;
    background-color: #282c34;
    margin-bottom: -7px;
    border-radius: 5px;
    background-position: 10px 10px;
  }
  
  .CodeMirror-wrap .CodeMirror-scroll {
    overflow-x: auto;
  }
  .cm-s-inner.CodeMirror {
    margin: 2rem 0;
    padding: 1.2rem .8rem;
    color: #4f5467;
    font-family: 'JetBrainsMono';
    border-radius: 10px;
    background-color: var(--block-background-color);
    /* border: 1px solid #eef2f5;*/
    line-height: 1.6rem;
  }
  
  .CodeMirror-gutters {
    border-right: 1px solid #a2b6d452;
    background: inherit;
    white-space: nowrap;
  }
  
  pre.CodeMirror-line {
    padding: 0 1.2rem;
  }
  
  .CodeMirror-linenumber {
    padding: 0 3px 0 5px;
    text-align: right;
    color: var(--primary-color);
  }
  
  /* 
   * Code Block - Color Scheme
   */
  
  .cm-s-inner .cm-keyword {
    color: #1694b6 !important;
  }
  .cm-s-inner .cm-operator {
    color: #2f86d2 !important;
  }
  .cm-s-inner .cm-variable,
  .cm-s-inner .cm-builtin,
  .cm-s-inner .cm-header,
  .cm-s-inner .cm-tag,
  .cm-s-inner .cm-property,
  .cm-s-inner .cm-quote {
    color: #b2368f !important;
  }
  
  .cm-s-inner .cm-variable-2 {
    color: #7aadad !important;
  }
  .cm-s-inner .cm-variable-3,
  .cm-s-inner .cm-type,
  .cm-s-inner .cm-atom {
    color: #378ed8 !important;
  }
  
  .cm-s-inner .cm-number {
    color: #1a5494 !important;
  }
  .cm-s-inner .cm-def,
  .cm-s-inner .cm-qualifier {
    color: #0744ac !important;
  }
  .cm-s-inner .cm-string {
    color: #b39cde !important;
  }
  .cm-s-inner .cm-string-2 {
    color: #27638f !important;
  }
  .cm-s-inner .cm-comment {
    color: #9a9a9a !important;
  }
  
  .cm-s-inner .cm-meta {
    color: #0b93be !important;
  }
  .cm-s-inner .cm-attribute {
    color: #a7a86a !important;
  }
  
  .cm-s-inner .cm-error {
    color: rgba(255, 255, 255, 1) !important;
    background-color: #b9218e40 !important;
  }
  .cm-s-inner .CodeMirror-matchingbracket {
    text-decoration: underline;
    color: white !important;
  }
  .CodeMirror div.CodeMirror-cursor {
    border-left: 1px solid var(--primary-color);
    z-index: 3;
  }
  
  .cm-s-inner div.CodeMirror-selected {
    background: rgba(167, 178, 189, 0.2) !important;
  }
  
  .cm-s-inner.CodeMirror-focused div.CodeMirror-selected {
    background: rgba(167, 178, 189, 0.2) !important;
  }
  
  .cm-s-inner .CodeMirror-selected,
  .cm-s-inner .CodeMirror-selectedtext {
    background-color: rgba(167, 178, 189, 0.0) !important;
  }
  
  .cm-s-inner .CodeMirror-line::-moz-selection,
  .cm-s-inner .CodeMirror-line > span::-moz-selection,
  .cm-s-inner .CodeMirror-line > span > span::-moz-selection {
    background-color: rgba(167, 178, 189, 0.2);
  }
  
  .cm-s-inner .CodeMirror-line::selection,
  .cm-s-inner .CodeMirror-line > span::selection,
  .cm-s-inner .CodeMirror-line > span > span::selection {
    background-color: rgba(167, 178, 189, 0.2);
  }
  